<!-- 保护或解除保护快照 -->
<template>
  <div>
    <a-modal 
      v-model="modalVisible" 
      @ok='handleProtectStatus'
      @cancel="handleCancel"
      :maskClosable="false"
      :width="400"
      v-dragModal
    >
      <template slot="title">
        <!-- <i class="icon icon-exclaim64f tip-icon"></i> -->

        <Iconfont class="icon tip-icon" type="icon-exclaim64f"></Iconfont>
        <span v-if="!targetSnapshot.is_protected">{{$t('Protect')}}</span>
        <span v-else>{{$t('Remove-protection')}}</span>
      </template>

      <div v-if="!targetSnapshot.is_protected">
        <span v-if="$store.state.language=='zh'">
          你确定将 "{{targetSnapshot.snap}}" 设置为保护状态吗？
        </span>
        <span v-else>
          Are you sure to set "{{targetSnapshot.snap}}" to the protection state?
        </span>
      </div>
      <div v-else>
        <span v-if="$store.state.language=='zh'">
          你确定解除 "{{targetSnapshot.snap}}" 的保护状态吗？
        </span>
        <span v-else>
          Are you sure to release the protection status of "{{targetSnapshot.snap}}"?
        </span>
      </div>

      <template slot="footer">
        <a-button @click="handleCancel" class="submit-btn">
          {{$t('Cancel')}}
        </a-button>
        <a-button class="submit-btn" type="primary" @click="handleProtectStatus" :loading="submitLoading" >
          {{$t('Sure')}}
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "ProtectOrNotSnap",
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    targetSnapshot: {
      type: Object,
      required: true
    },
  },
  data() {
    return {
      modalVisible: false,
      submitLoading: false,
    }
  },

  watch: {
    visible(newValue) {
      this.modalVisible = newValue;
    }
  },

  methods: {
    //处理保护状态更改
    async handleProtectStatus() {
      this.submitLoading = true;
      const params = {
        pool_id: this.targetSnapshot.pool,
        image_id: this.targetSnapshot.image_id,
        snapshot_id: this.targetSnapshot.snap_id,
      }
      let res;
      try {
        if(this.targetSnapshot.is_protected) {
          // 需要解除保护操作
          res = await this.$api.blockInfo.noProtectSnapRequest(params)
        }else { // 需要保护操作
          res = await this.$api.blockInfo.protectSnapRequest(params)
        }
        if(res) {
          this.model(res.data.id) //返回模板
          this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
          if(res.data.flag == 0) {
            this.$emit('updateInfo')
          }
        }
      }catch(error) {
        this.$message.error(error);
      }
      this.handleCancel();
      this.submitLoading = false;
    },

    //关闭弹窗
    handleCancel() {
      this.$emit('closeOperationModal', 'isProtect-snap');
    },
  },
}
</script>
<style scoped>
  .tip-icon {
    color: var(--mainOrangeColor);
    margin-right: 8px;
  }
  .submit-btn {
    width: 70px;
  }
  ::v-deep.ant-modal-header {
    border-bottom: none;
  }
  ::v-deep.ant-modal-footer {
    border-top: none;
  }
  ::v-deep.ant-modal-body {
    padding: 12px 24px;
  }
</style>